<template>
  <!-- 危大工程分类列表 -->
  <base-breadcrumb>
    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="危大工程分类设置" /> -->
        <div class="table-operateors mb20">
          <a-button type="primary" icon="plus" @click="handleUpdate('add')" v-if="hideBuquBtn()">新增分类</a-button>
        </div>
        <list-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :isScrollX="false"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :showPage="false"
        >
          <template slot="enabled" slot-scope="text, record">
            <status-display
              :status-code="record.enabled"
              :status-map="{ true : {
            label: '可用',
            color: 'green'
          }, false: {
            label: '不可用',
            color: 'red'
          }}"
            />
          </template>
          <template slot="operator" slot-scope="text, record">
            <a class="base-btn" @click="handleUpdate('edit', record)" v-if="hideBuquBtn()">编辑</a>
          </template>
        </list-table>
      </a-card>
    </div>
    <update-danger-classify
      v-if="visible.update"
      :init-data="childInitData"
      @cancel="visible.update = false"
      @confirm="handleUpdateConfirm"
    />
  </base-breadcrumb>
</template>

<script>
import StatusDisplay from '@/components/StatusDisplay'
import { getSelectListByType } from '@/api/safetySupervision/common.js'
import UpdateDangerClassify from './UpdateDangerClassify'
import { STable } from '@/components'
export default {
    name:'a'+Date.now(),  components: {
    STable,
    UpdateDangerClassify,
    StatusDisplay,
  },
  data() {
    return {
      childInitData: {},
      visible: {
        update: false,
      },
      columns: [
        {
          title: '分类名称',
          width:300,
          dataIndex: 'name',
        },
        {
          title: '状态',
          width:100,
          dataIndex: 'enabled',
          scopedSlots: { customRender: 'enabled' },
        },
        {
          title: ' 操作',
          dataIndex: 'operator',
          width:100,
          scopedSlots: { customRender: 'operator' },
        },
      ],
      queryParam: {
        type: 8,
      },
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const [err, res] = await getSelectListByType(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            console.log(res,'res')
            resolve(res)
          }
        })
      },
    }
  },
  methods: {
    handleUpdateConfirm() {
      this.visible.update = false
      this.$refs.table.refresh(true)
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      this.childInitData = {
        ...data,
        pageType: type,
      }
      this.visible.update = true
    },
  },
}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;
    .flex-content {
      flex: auto;
    }
    .divider {
      margin: 0 12px;
    }
    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}
.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>